/**
 * 定制 App 样式
 */
import { css } from '@emotion/react'
import { type ThemeConfig } from 'antd'
import { colors } from './variables'

/**
 * 全局样式
 */
export const global = css`
  #root,
  .ant-app {
    height: 100%;
  }
  .ant-app {
    min-height: 700px;
    min-width: 1000px;
  }
`

// ----------------------------------------

/**
 * 定制 Ant Design Theme
 * 参见 https://ant.design/docs/react/customize-theme-cn
 */
export const theme: ThemeConfig = {
  token: {
    colorInfo: colors.link,
    colorLink: colors.link,
    colorPrimary: colors.link,
    colorBgSpotlight: colors.highlight,
  },
  components: {
    Layout: {
      bodyBg: '#F1F2F4',
      headerBg: '#FFFFFF',
    },
  },
}

// ----------------------------------------

/**
 * 风格化组件：把以下内容应用到“组件”或“组件内的元素”上，以使其符合特定的样式需求
 */

/**
 * 可自由调整大小的 <Spin>
 */
export function spin(size: number) {
  return css`
    &,
    .ant-spin-nested-loading > div > &.ant-spin {
      display: block;
      font-size: ${size}px;
      .ant-spin-dot {
        font-size: inherit;
      }
      .ant-spin-dot-item {
        height: 0.5em;
        width: 0.5em;
      }
      .ant-spin-text {
        font-size: 0.43em;
      }
    }
    .ant-spin-nested-loading > div > &.ant-spin {
      .ant-spin-dot {
        margin: -0.5em;
      }
      &.ant-spin-show-text .ant-spin-dot {
        margin-top: -1.2em;
      }
    }
  `
}

// 带图片的 Ant Design Table 单元格，减少空间占用
export const imageCell = css`
  padding-top: 6px !important;
  padding-bottom: 6px !important;
`

// 与 Ant Design Modal 样式一致的 footer
export const modalFooter = css`
  margin-top: 12px;
  text-align: end;
  button {
    margin-left: 8px;
  }
`

// 抛弃 Ant Design Modal 原样式接口，自行实现 body 和 footer 的样式
// 约定：
// - 主体使用 <main> 标签
// - footer 使用 <footer> 标签
export const bareModal = css`
  .ant-modal-content {
    padding: 0 0 20px;
  }
  .ant-modal-header {
    padding: 20px 24px 0;
  }
  .ant-modal-body,
  .ant-modal-body > form,
  .ant-modal-body > .ant-spin-nested-loading > .ant-spin-container {
    & > main {
      padding: 0 24px;
    }
    & > footer {
      ${modalFooter}
      padding: 0 24px;
    }
  }

  // 这个并不是 Ant Design 原有的样式，但对话框内的表单通常都要加一点顶部空白，不然太拥挤
  .ant-modal-body > form {
    padding-top: 20px;
  }
`
